[NAE-2122] Implement Structured and Efficient Pagination in gRPC #288
Conversation
- Enable proper task pagination handling - Added a pagination view flag and adjusted task loading logic to properly handle paginated data in task and case views.
WalkthroughThe changes adjust pagination logic for task and case lists by moving pagination state management from Angular templates and component constructors into service-level logic. This involves setting a pagination view flag and invoking pagination methods in the services, changing how tasks are accumulated and displayed. Template-based pagination slicing is removed. Changes
Sequence Diagram(s)sequenceDiagram
participant Component as Task List Component
participant Service as TaskViewService
Component->>Service: Set paginationView = true
Component->>Service: Call nextPagePagination(pageSize, pageIndex)
Component->>Service: Assign tasks$ observable
Service->>Service: On tasksMap$ emission
alt paginationView is true
Service->>Component: Emit only current page's tasks
else
Service->>Component: Accumulate and emit all pages' tasks
end
sequenceDiagram
participant Template as Angular Template
participant Component as Task List Component
%% Old flow
Template->>Component: *ngFor="let task of tasks | slice:..."
Note right of Template: Template handles pagination filtering
%% New flow
Template->>Component: *ngFor="let task of tasks"
Note right of Template: All tasks provided by service, no template slicing
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
projects/netgrif-components-core/src/lib/view/task-view/service/task-view.service.ts (1)
54-54: Consider adding a getter for the pagination view state.While the protected property and public setter provide good encapsulation, adding a public getter would improve debuggability and allow components to check the current pagination state.
+public get paginationView(): boolean { + return this._paginationView; +}projects/netgrif-components-core/src/lib/panel/task-panel-list/task-panel-list-pagination/abstract-task-list-pagination.component.ts (1)
25-32: Consider potential race conditions in the setter.While the current implementation looks correct, repeated calls to the setter could potentially cause race conditions if the
nextPagePaginationmethod is called multiple times in quick succession before the observable pipeline completes.Consider adding a debounce or guard to prevent multiple rapid pagination calls:
@Input() set tasks$(tasks: Observable<Array<TaskPanelData>>) { if (this._isSettingTasks) { return; } this._isSettingTasks = true; this._taskViewService.paginationView = true; this._taskViewService.nextPagePagination(this.pageSize, this.pageIndex); this._tasks$ = tasks.pipe( tap(() => { this.length = this._taskViewService.pagination.totalElements; this.pageIndex = this._taskViewService.pagination.number; this._isSettingTasks = false; }) ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
projects/netgrif-components-core/src/lib/panel/task-panel-list/task-panel-list-pagination/abstract-task-list-pagination.component.ts(1 hunks)projects/netgrif-components-core/src/lib/view/case-view/components/case-list-paginator/abstract-case-list-paginator.component.ts(1 hunks)projects/netgrif-components-core/src/lib/view/task-view/service/task-view.service.ts(3 hunks)projects/netgrif-components/src/lib/panel/task-panel-list-pagination/task-list-pagination.component.html(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (9)
- GitHub Check: task-list-completed
- GitHub Check: task-list-completed
- GitHub Check: task-list-completed
- GitHub Check: task-list-completed
- GitHub Check: Matrix Test (20)
- GitHub Check: Matrix Test (22)
- GitHub Check: Test with SonarCloud
- GitHub Check: Matrix Test (24)
- GitHub Check: task-list-completed
🔇 Additional comments (5)
projects/netgrif-components-core/src/lib/view/task-view/service/task-view.service.ts (2)
209-211: LGTM! Clean setter implementation.The setter provides a clean interface for external components to control pagination behavior.
131-133: Service-level pagination is opt-in; existing task views are unaffected.The
_paginationViewflag defaults tofalseand no component currently setspaginationViewonTaskViewService, so the new conditional only applies when explicitly enabled. All existing templates (including those usingslicefor paginated views) will continue to behave as before.projects/netgrif-components-core/src/lib/view/case-view/components/case-list-paginator/abstract-case-list-paginator.component.ts (1)
29-30: Good initialization order for pagination setup.Setting
paginationViewto true before callingnextPagePaginationensures the service is properly configured for pagination mode before triggering the pagination request. This follows the same pattern as the task pagination component.projects/netgrif-components/src/lib/panel/task-panel-list-pagination/task-list-pagination.component.html (1)
14-17: Perfect alignment with service-level pagination changes.Removing the slice pipe from the *ngFor loop is the correct approach since the TaskViewService now handles pagination internally when
paginationViewis true. This eliminates redundant client-side slicing and ensures the template renders exactly what the service provides.projects/netgrif-components-core/src/lib/panel/task-panel-list/task-panel-list-pagination/abstract-task-list-pagination.component.ts (1)
26-27: Proper pagination setup in setter.Setting
paginationViewto true and callingnextPagePaginationbefore processing the tasks observable ensures the service is configured correctly for pagination mode. This initialization order is critical for the new pagination behavior to work properly.
|
Description
Fix pagination issues in paged task view.
Implements NAE-2122
Dependencies
No new dependencies were introduced
Third party dependencies
No new dependencies were introduced
Blocking Pull requests
There are no dependencies on other PR
How Has Been This Tested?
Manually tested inside of application deployed in localhost.
Checklist:
Summary by CodeRabbit
New Features
Refactor
Style